<template>
	<view class="pad-lr-30">
	<view class="mar-top-30 radius-16 bgfff pad-lr-20 pad-tb-20 display align-items" v-for="item in List" :key="item.id" @click="gogoodsdetails(item.goods_id)">
		<image :src="item.image" class="proudct-item-icon-10 radius-16" mode=""></image>
		<view class="ml20 right_width">
			<view class="text-clamp-1 fontSize-28">{{item.name}}</view>
			
			<view class="mar-top-10 display-sb align-items">
				<view class=" fontSize-28 col-E23737">￥{{item.price}}</view>
				<view class="pad-lr-18 pad-tb-12 fontSize-26 radius-30 bgfff borderccc" @click="cklickcollect(item.goods_id,item.id)">取消收藏</view>
			</view>
		</view>
	</view>
	<view class="display-ce align-items" v-if="List.length==0">
		<tm-result :showBtn="false" subTitle=" " title="暂无数据" color="#bc8c1e"></tm-result>
	</view>
	</view>
</template>

<script lang="ts" setup>
import {collectGoodsList,collectGoods} from '@/utils/api'
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { ref } from 'vue';
onLoad(()=>{
	_my_collect()
})
onReachBottom(()=>{
	if(page.value>1){
		_my_collect()
	}
})
//收藏列表
const List = ref([])
const page = ref(1)
const _my_collect =() =>{
	collectGoodsList({page:page.value,limit:10}).then(res=>{
		if(res.code==1){
			List.value = List.value.concat(res.data.collect.data)
			if(res.data.collect.data.length>0){
				page.value++
			}
		}
	})
}
const cklickcollect =(goods_id:number|string,id:number|string) =>{
		collectGoods({goods_id:goods_id}).then(res=>{
			uni.showToast({
				title:res.msg,
				icon:'none'
			})
			if(res.code==1){
				List.value = List.value.filter(item=>item.id!=id)
			}
		})
}
const gogoodsdetails =(id:number) =>{
	uni.navigateTo({
		url:'/indexpages/goodsDetail/goodsDetail?id='+id
	})
}
</script>

<style lang="scss">
@import 'collectlist.scss';
</style>
